<template>
    <div class="form-group">
        <label :for="inputDefine.name" class="col-sm-2 control-label">{{inputDefine.displayName}}</label>
        <div class="col-sm-10">
            <input type="text" :name="inputDefine.name" class="form-control" :value="elementData" @input="inputChange($event)">
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{}
        },
        props:{
          inputDefine:{
            type:Object,
            required: true
          },
          elementData:{
            required: true
          }
        },
        methods:{
            inputChange:function(event){
               var dataInfo={"newValue":event.target.value}
               this.$emit('dataChange',this.inputDefine,dataInfo);
            }
          }
    }
</script>
